<template>
  <!-- 我的咨询详情 -->
  <div class="myAppoint">
    <Form
      ref="form"
      :model="form"
      :rules="ruleCustom"
      :label-width="80"
      label-position="left"
    >
      <h5 class="title">预约信息</h5>
      <FormItem label="预约状态:" prop="status">
        <Input type="text" v-model="form.status"></Input>
      </FormItem>
      <FormItem label="挂号序号:" prop="serialNo">
        <Input type="text" v-model="form.serialNo"></Input>
      </FormItem>
      <FormItem label="接诊医生:" prop="expertName">
        <Input type="text" v-model="form.expertName"></Input>
      </FormItem>
      <FormItem label="就诊人:" prop="username">
        <Input type="text" v-model="form.userVisitCard.username"></Input>
      </FormItem>
      <FormItem label="性别:" prop="sex">
        <Input type="text" v-model="form.userVisitCard.sex"> </Input>
      </FormItem>
      <FormItem label="年龄:" prop="birthday">
        <Input type="text" v-model="form.userVisitCard.birthday"></Input>
      </FormItem>
      <FormItem label="就诊时段:" prop="timeSlot">
        <Input type="text" v-model="form.timeSlot"></Input>
      </FormItem>
      <FormItem label="就诊卡号:" prop="visitCardNo">
        <Input type="text" v-model="form.visitCardNo"></Input>
      </FormItem>
      <FormItem label="院区场地:" prop="siteName">
        <Input type="text" v-model="form.site.siteName"></Input>
      </FormItem>
      <div class="health-card">
        <div class="text">
          <p>电子健康卡</p>
          <p>点击右侧二维码放大</p>
        </div>
        <div class="qrcode" @click="handleClick">
          <div id="qrcode" ref="qrcode"></div>
        </div>
      </div>
      <!-- 已完成 -->
      <div
        class="payment-infor"
        v-if="status != 0 || status != 4 || status != 6"
      >
        <h5 class="title">缴费信息</h5>
        <FormItem label="缴费金额:" prop="money">
          <Input type="text" v-model="form.money"></Input>
        </FormItem>
        <FormItem label="缴费时间:" prop="createTime">
          <Input type="text" v-model="form.createTime"></Input>
        </FormItem>
      </div>
      <Button @click="handleCancle" v-if="status == 0 || status == 1"
        >取消预约</Button
      >

      <!-- 已预约/已完成  缴费信息-->
      <div class="payment-infor" v-if="status == 3">
        <h5 class="title">诊断结果</h5>
        <FormItem label="诊断结果:" prop="diagnosticContent">
          <span class="diagnosis">{{ form.diagnosticContent }}</span>
        </FormItem>
        <h5 class="title">处方信息</h5>
        <FormItem label="处方名称:" prop="prescriptionName">
          <Input
            type="text"
            v-model="form.prescriptionName"
            style="width: 30%"
          ></Input>
          <Button type="text" @click="handleShow" class="look">查看</Button>
        </FormItem>
        <h5>附件</h5>

        <div class="list" v-if="presList.length > 0">
          <p
            v-for="item in presList"
            :key="item.fileName"
            class="accessory-item"
          >
            <Icon type="md-list-box" /> {{ item.fileName }}
            <Button type="text" @click="handleExport(item.url)" class="look"
              >下载</Button
            >
          </p>
        </div>
        <p v-else>暂无数据</p>
      </div>

      <!-- 预览处方 -->
      <!-- 增加弹框 -->
      <Modal
        v-model="prescriptionNameModel"
        title="处方预览"
        width="500"
        :footer-hide="true"
      >
        <div
          class="content"
          v-html="form.expertAdvice"
          v-if="form.expertAdvice"
        ></div>
        <empty v-else />
      </Modal>
      <!-- 已取消-->
      <!-- <div class="payment-infor" v-if="status == 4 || status == 6">
        <h5 class="title">取消信息</h5>
        <FormItem label="取消时间:" prop="age">
          <Input type="text" v-model="form.age"></Input>
        </FormItem>
        <h5 class="title">退款信息</h5>
        <FormItem label="已退款:" prop="age">
          <Input type="text" v-model="form.age"></Input>
        </FormItem>
        <FormItem label="退款时间:" prop="age">
          <Input type="text" v-model="form.age"></Input>
        </FormItem>
      </div> -->
    </Form>

    <!-- 二维码预览 -->
    <Modal
      v-model="qrCodeModel"
      title="二维码预览"
      width="500"
      :footer-hide="true"
    >
      <div class="qrcodebig">
        <div id="qrcodebig" ref="qrcodebig"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  getAppointId,
  cancleAppoint,
  getPrescripList,
  downFile,
  postExport,
} from "@/api/myAttention";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      prescriptionNameModel: false,
      qrCodeModel: false, //二维码预览
      form: {
        expertName: null, //接诊医生
        status: null, //状态（0待付款，1待会诊，2会诊中，3已完成，4用户取消,5过号，6专家取消）
        appointmentTime: null, //	预约时间
        serialNo: null, //	挂号序号
        userVisitCard: {
          username: null, //就诊人
          sex: null, //	专家性别
          birthday: null, //年龄
        },
        site: {
          siteName: null, //院区场地
        },
        money: null, //缴费金额
        prescriptionName: null, //处方名称
        diagnosticContent: null, //诊断结果
        timeSlot: null, //就诊时段
        visitCardNo: null, //	就诊卡号
        createTime: null, //缴费时间,
        expertAdvice: null, //处方详情
      },
      ruleCustom: {},
      status: this.$route.query.status,
      id: this.$route.query.id,
      presList: [],
    };
  },
  mounted() {
    this.getDetails();
  },
  methods: {
    // 获取详情
    getDetails() {
      getAppointId(this.id).then((res) => {
        const { code, result } = res;
        if (code == 200) {
          const obj = result || {};
          Object.keys(this.form).map((key) => {
            this.form[key] = obj[key];
          });
          this.form.userVisitCard.sex =
            obj.userVisitCard.sex == 1 ? "男" : "女";
          this.form.status = this.textStatus(this.form.status);
          this.form.expertName = obj.expert.realName || ''
          this.qrCode(this.form.visitCardNo, 100, "qrcode");
        }
      });
      //   处方列表
      getPrescripList(this.id).then((res) => {
        const { code, result } = res;
        if (code == 200) {
          this.presList = result || [];
        }
      });
    },
    textStatus(status) {
      let str = "";
      switch (status) {
        case 0:
          str = "待付款";
          break;
        case 1:
          str = "待会诊";
          break;
        case 2:
          str = "会诊中";
          break;
        case 3:
          str = "已完成";
          break;
        case 4:
          str = "用户取消";
          break;
        case 5:
          str = "过号";
          break;
        case 6:
          str = "专家取消";
          break;
        default:
      }
      return str;
    },
    //取消预约
    handleCancle() {
      this.$Modal.confirm({
        title: "确认取消?",
        content: "是否确认取消预约?",
        loading: true,
        onOk: () => {
          cancleAppoint(this.id).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("已成功取消预约");
              this.getDetails();
            }
          });
        },
        onCancel: () => {},
      });
    },
    //打开大的二维码
    handleClick() {
      this.qrCodeModel = true;
      this.qrCode(this.form.visitCardNo, 300, "qrcodebig");
    },
    //生成二维码
    qrCode(url, size, dom) {
      // if (this.$refs.qrcodebig.children.length) {
      //   return false;
      // }
      let qrcode = new QRCode(dom, {
        width: size, //图像宽度
        height: size, //图像高度
        colorDark: "#000000", //前景色
        colorLight: "#ffffff", //背景色
        typeNumber: 4,
        // correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //生成另一个新的二维码
    },
    // 下载
    handleExport(fileUrl) {
      let formdata = new FormData();
      formdata.append("filePath", fileUrl);

      postExport(formdata).then((res) => {
        console.log("res", res);
        if (res.status == 200) {
          let fileName = res.headers["content-disposition"].split(";")[1];
          let name = decodeURIComponent(fileName).split("=")[1];
          this.download(name, res.data);
          this.$Message.success({
            content: "下载成功",
            duration: 3,
          });
        }
      });
    }, // 下载
    download(name, data) {
      let blob = new Blob([data], { type: "application/octet-stream" });
      let url = window.URL.createObjectURL(blob);
      let alink = document.createElement("a");
      alink.setAttribute("href", url);
      alink.setAttribute("download", name);
      alink.click();
    },

    // 预览处方
    handleShow() {
      this.prescriptionNameModel = true;
    },
    cancel() {
      this.prescriptionNameModel = false;
    },
    ok() {
      this.prescriptionNameModel = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.myAppoint {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(288 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(30 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
  .health-card {
    display: flex;
    align-items: center;
    margin: 30px 0;
    .text {
      p:nth-of-type(2) {
        color: #9d9d9d;
      }
    }
    .qrcode {
      margin-left: 60px;
      cursor: pointer;
    }
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #1f1f1f;
    &::before {
      position: absolute;
      content: "";
      width: 5px;
      height: 18px;
      background: #fd5151;
      left: 15px;
    }
  }
  .look {
    color: blue;
    position: absolute;
    left: 10%;
  }
  .diagnosis {
    display: block;
    width: 60%;
  }
  .accessory-item {
    display: flex;
    align-items: center;
  }
  ::v-deep .ivu-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .ivu-input {
    border: none;
  }
}

.qrcodebig {
  display: flex;
  justify-content: center;
  padding-bottom: calc(30 / 1920 * 100vw);
}
</style>
